<!-- 公共主页卡片标题配置 -->
<template>
  <div id="CardHeader">
    <span>{{ CardHeaderName }}</span>
    <div class="button_box">
      <template v-for="(item, index) in buttonArray">
        <el-button v-if="item === 'AddCardFunction'" :key="index" type="primary" round size="small" icon="el-icon-plus" @click="AddCardFunction">添加</el-button>
        <el-button v-if="item === 'EidtCardFunction'" :key="index" type="primary" round size="small" icon="el-icon-edit" @click="EidtCardFunction">编辑</el-button>
        <el-button v-if="item === 'DeleteCardFunction'" :key="index" type="danger" round size="small" icon="el-icon-delete" @click="DeleteCardFunction">删除</el-button>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardHeader',
  props: {
    buttonArray: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      CardHeaderName: '' // 卡片名称
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {
  },

  /* 观察Vue实例上的数据变动 */
  watch: {
  },

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {
    this.CardHeaderNameFun() // 获取卡片标题
  },

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    // 获取卡片标题
    CardHeaderNameFun() {
      console.log('this.$route', this.$route)
      this.CardHeaderName = this.$route.meta.title
    },
    // 卡片头部添加
    AddCardFunction() {
      this.$emit('AddCardFunction', true)
    },
    // 卡片头部编辑
    EidtCardFunction() {
      this.$emit('EidtCardFunction', true)
    },
    // 卡片头部删除
    DeleteCardFunction() {
      this.$emit('DeleteCardFunction', true)
    }
  }
}
</script>

<style lang='scss' scoped>
#CardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  span {
    font-size: 1.2rem;
    font-weight: bold;
  }
  .button_box{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
